import { useNavigate } from 'react-router-dom'
import { Button, message } from 'tdesign-react'
import { FormList, Form } from '@/components/Form'
import loginLeft from '@/assets/images/login-page/login_left.png'
import logo from '@/assets/images/login-page/logo.png'

import './index.less'

import type { FormListItemType } from '@/types/form.type'

const Login = () => {

  const navigate = useNavigate()

  const [form] = Form.useForm()
  const formList: FormListItemType[] = [
    {
      type: 'input',
      name: 'username',
      label: '用户名',
      formItemProps: {
        rules: [{ required: true, message: '请输入用户名' }]
      }
    },
    {
      type: 'input',
      name: 'password',
      label: '密码',
      formItemProps: {
        rules: [{ required: true, message: '请输入密码' }]
      },
      formFieldProps: {
        type: 'password'
      }
    }
  ]

  const onLogin = (validateResult: any) => {
    const { firstError, fields } = validateResult
    if (firstError) {
      message.error(firstError)
      return
    }
    // TODO: 登录逻辑
    if (fields.username === 'admin' && fields.password === '123456') {
      message.success('登录成功')
      localStorage.setItem('loginStatus', '1')
      navigate('/home')
    }
  }

  return <div className='login-page'>
    <div className='login-box'>
      <div className='login-left'>
        <img src={loginLeft} alt='login' />
      </div>
      <div className='login-form'>
        <div className='login-logo'>
          <img className='login-icon' src={logo} alt='logo' />
          <span className='logo-text'>Auto Deal Email</span>
        </div>
        <div className='login-form-content'>
          <FormList
            form={form}
            formList={formList}
            labelWidth={90}
            footer={
              <>
                <Button className='login-button c-form-button-submit' type='submit'>登录</Button>
              </>
            }
            onSubmit={onLogin}
          />
        </div>
      </div>
    </div>
  </div>
}

export default Login
